<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 200px; height: 300px; background-color: beige;}
        #div2{width: 200px; height: 300px; background-color:pink;}
    </style>
    <script>
        function randomColor(){
            var str = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+",1)"
            return str
        }
        window.onload = function(){
            var oDiv1 = document.getElementById("div1")
            var oDiv2 = document.getElementById("div2")
            var input1 = document.getElementById("input1")
            var btn1 = document.getElementById("btn1")
            var btn2 = document.getElementById("btn2")
            var btn3 = document.getElementById("btn3")

            btn1.onclick = function(){
                if(!input1.value){
                    alert("输入内容不允许为空！")
                }else{
                    var newDiv = document.createElement("div")//注意这个div
                    var oText = document.createTextNode(input1.value)
                    newDiv.appendChild(oText)
                    oDiv2.appendChild(newDiv)
                    newDiv.style.backgroundColor = randomColor()
                    input1.value = ''
                }
            }

            btn2.onclick = function(){
                oDiv2.removeChild(oDiv2.lastChild)
            }

            btn3.onclick = function(){
                var cloneNode1 = oDiv2.lastChild.cloneNode(true)
                oDiv2.appendChild(cloneNode1)
            }

        }

        
    </script>
</head>
<body>
    
    <div id = "div1">
        <input type="text" placeholder="请输入内容" id="input1"/><br>
        <button id = "btn1">增加</button>
        <button id = "btn2">删除</button>
        <button id = "btn3">复制</button>
    </div>
    <div id = "div2">
    </div>
</body>
</html>